<template>
  <div class='wrapper'>
    <div class="chartLint__bottom">
      <el-row :gutter="12">
        <el-col :span="9">
          <el-card shadow="hover" style="margin-top: 15px;">
            <div class='chart' id='chart'></div>
          </el-card>
        </el-col>
      </el-row>
    </div>

  </div>
</template>
 
<script>
import * as echarts from "echarts";
export default {
  data() {
    return {}
  },
  mounted() {
    this.drawChart()
  },
  methods: {
    drawChart() {
      // 基于准备好的dom，初始化echarts实例
      const chart = this.$echarts.init(document.getElementById('chart'))
      // 监听屏幕变化自动缩放图表
      window.addEventListener('resize', function () { chart.resize() })
      // 绘制图表
      chart.setOption({
        title: {
          text: '安装部报表',
          subtext: '2022年2月水电气收费记录',
          x: '4%',
          y: '6%',
          subtextStyle: { // 标题样式
            fontSize: 16,
          },
        },
        color: ['#74d1fd', '#009ae4', '#0071c1'],
        // 设置图表的位置
        grid: {
          x: 40, // 左间距
          y: 90, // 上间距
          x2: 50, // 右间距
          y2: 30, // 下间距
          containLabel: true // grid 区域是否包含坐标轴的刻度标签, 常用于『防止标签溢出』的场景
        },
        // 提示框组件
        tooltip: {
          trigger: 'axis', // 触发类型, axis: 坐标轴触发
          axisPointer: {
            // 指示器类型  'line' 直线指示器 'shadow' 阴影指示器 'none' 无指示器 'cross' 十字准星指示器。
            // 其实是种简写，表示启用两个正交的轴的 axisPointer。
            type: 'none'
          },
          textStyle: {
            color: '#cdd3ee' // 文字颜色
          },
          // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式
          // 折线（区域）图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）
          // formatter: `{b}<br />{a}: 元<br />{a1}: {c1}万件`
        },
        // X轴
        xAxis: {
          type: 'value', // 坐标轴类型,   'value' 数值轴，适用于连续数据
          // 坐标轴刻度
          axisTick: {
            show: false // 是否显示坐标轴刻度 默认显示
          },
          // 坐标轴轴线
          axisLine: { // 是否显示坐标轴轴线 默认显示
            show: false // 是否显示坐标轴轴线 默认显示
          },
          // 坐标轴在图表区域中的分隔线
          splitLine: {
            show: false // 是否显示分隔线。默认数值轴显示
          },
          // 坐标轴刻度标签
          axisLabel: {
            show: false // 是否显示刻度标签 默认显示
          }
        },
        yAxis: [
          // 左侧Y轴
          {
            type: 'category', // 坐标轴类型,  'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据
            // 坐标轴刻度
            axisTick: {
              show: false // 是否显示坐标轴刻度 默认显示
            },
            // 坐标轴轴线
            axisLine: { // 是否显示坐标轴轴线 默认显示
              show: false, // 是否显示坐标轴轴线 默认显示
              lineStyle: { // 坐标轴线线的颜色
                color: '#cdd3ee'
              }
            },
            // 坐标轴刻度标签
            axisLabel: {
              show: true, // 是否显示刻度标签 默认显示
              fontSize: 14, // 文字的字体大小
              color: '#cdd3ee', // 刻度标签文字的颜色
              // 使用字符串模板，模板变量为刻度默认标签 {value}
              formatter: '{value}'
            },
            data: ['0-5day', '6-10day', '11-15day', '16-20day', '21-25day', '26-30day'] // 类目数据，在类目轴（type: 'category'）中有效
          },
          // 右侧Y轴
          {
            type: 'category', // 坐标轴类型
            // 坐标轴轴线
            axisLine: {
              show: false
            },
            // 坐标轴刻度
            axisTick: {
              show: false
            },
            // 坐标轴刻度标签
            axisLabel: {
              show: true, // 是否显示刻度标签 默认显示
              fontSize: 14, // 文字的字体大小
              color: '#cdd3ee', // 刻度标签文字的颜色
              // 使用字符串模板，模板变量为刻度默认标签 {value}
              formatter: `{value}   5w(个)`
            },
            data: [27660, 57633, 47683, 27033, 20683, 20083]
          }
        ],
        // 系列列表
        series: [
          {
            type: 'bar', // 系列类型
            // 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加
            barMaxWidth: 15, // 柱条的最大宽度，不设时自适应
            data: [60, 30, 20, 10, 45, 70], // 系列中的数据内容数组
            itemStyle: {
              color: new echarts.graphic.LinearGradient(
                1, 1, 0, 0, [{//只要修改前四个参数就ok
                  offset: 0,
                  color: '#6739b6'
                }, //柱图渐变色
                {
                  offset: 1,
                  color: '#00C6FB'
                }
              ]
              ),
              barBorderRadius: 15,
              opacity: 0.7,
            },
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(110, 193, 244, 0.2)',
            },
          },
        ]
      })
    }
  }
}
</script>
 
<style scoped>
.wrapper .chart {
  width: 100%;
  height: 300px;
  margin: -20px 0 0 -20px;
}

.chartLint__bottom {
  margin-top: -420px;
}
</style>